import React from 'react';
import {WeaFormItem, WeaSelect, WeaInput, WeaLocaleProvider} from 'ecCom';
import { Checkbox } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

// 缩略图设置
class ELinkMode extends React.Component {
    render() {
        const {pictureWidth, pictureHeight,
            widthUnit, heightUnit, autoHeight, authoHeight, onChangeSize } = this.props;
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8txq0f`} label={getLabel(386551, '缩略图设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <ul style={{lineHeight: '29px'}}>
                    <li style={{display: 'inline-block'}}>
                        <span>
                            <span>
                                <span>{getLabel(386529, '宽度：')}</span>
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@vrs8py`}
                                    value={pictureWidth}
                                    style={{width: '40px', marginRight: '8px', marginBottom: '4px'}}
                                    onChange={value => onChangeSize('pictureWidth',  value)}
                                />
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@e0vpck`}
                                    className="portal-news-picture"
                                    value={widthUnit == 'px' ? '1' : '2'}
                                    onChange={value => onChangeSize( 'widthUnit',  value == '1' ? 'px' : '%' )}
                                    options={[
                                        {
                                            key: "1",
                                            selected: true,
                                            showname: "px"
                                        },
                                        {
                                            key: "2",
                                            selected: false,
                                            showname: "%"
                                        }
                                    ]}
                                    style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                />
                            </span>
                            {
                                autoHeight ? ''
                                    :
                                    <span style={{marginLeft: '12px'}}>
                                        <span>{getLabel(386530, '高度：')}</span>
                                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@820ah1`}
                                            value={pictureHeight}
                                            style={{width: '40px', marginRight: '8px', marginBottom: '4px'}}
                                            onChange={value => onChangeSize( 'pictureHeight', value)}
                                        />
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dic373`}
                                            className="portal-news-picture"
                                            value={heightUnit == 'px' ? '1' : '2' }
                                            onChange={value => onChangeSize('heightUnit', value == '1' ? 'px' : '%')}
                                            options={[
                                                {
                                                    key: "1",
                                                    selected: true,
                                                    showname: "px"
                                                },
                                                {
                                                    key: "2",
                                                    selected: false,
                                                    showname: "%"
                                                }
                                            ]}
                                            style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                        />
                                    </span>
                            }
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@h6r5s9`}
                                className={authoHeight}
                                style={{marginLeft: '0px'}}
                                checked={autoHeight}
                                onChange={e => onChangeSize('autoHeight', e.target.checked)}
                            >{getLabel(22494, '自适应高度')}</Checkbox>
                        </span>
                    </li>
                </ul>
            </WeaFormItem>
        );
    }
}

export default ELinkMode;
